<script lang="ts" setup>
import type { LayoutTheme } from '~/config/layout-theme.ts'
import { useAppLocale } from '~/composables/auto-lang.ts'

const appStore = useAppStore()

function onSwitch(theme: LayoutTheme['layoutStyle']) {
  appStore.updateStyleLayout(theme)
  if (theme === 'dark')
    document.documentElement.className = 'dark'
  else document.documentElement.removeAttribute('class')
}

const appLocale = useAppLocale()

function onSwitchLang(lang: string) {
  appLocale.value = lang
}

const { locale } = useI18n()

async function onRequest1() {
  await useGet(
    'https://mock.lingyu.org.cn/mock/642b5d1e939061307ed09d1b/example/test/200',
  )
}

async function onRequest2() {
  await usePost(
    'https://mock.lingyu.org.cn/mock/642b5d1e939061307ed09d1b/example/test/post',
  )
}

async function onRequest3() {
  await usePut(
    'https://mock.lingyu.org.cn/mock/642b5d1e939061307ed09d1b/example/test/put',
  ).then()
}

async function onRequest4() {
  await useDelete(
    'https://mock.lingyu.org.cn/mock/642b5d1e939061307ed09d1b/example/test/delete',
  )
}
</script>

<template>
  <div>
    <n-space>
      <n-button @click="onRequest1">
        get
      </n-button>
      <n-button @click="onRequest2">
        post
      </n-button>
      <n-button @click="onRequest3">
        put
      </n-button>
      <n-button @click="onRequest4">
        delete
      </n-button>
    </n-space>
  </div>
  <div class="mb-5 mt-3">
    <n-space>
      {{ locale }}
      <n-input />
      <n-button @click="onSwitchLang('zh-CN')">
        中文
      </n-button>
      <n-button @click="onSwitchLang('en-US')">
        English
      </n-button>
    </n-space>
  </div>
  <div class="mb-5">
    <n-space>
      <n-button @click="onSwitch('light')">
        浅色
      </n-button>
      <n-button @click="onSwitch('dark')">
        深色
      </n-button>
    </n-space>
  </div>
</template>

<style scoped></style>
